import React, { Component } from 'react';
import { Form, Input, Button, Popover } from 'antd';

const FormItem = Form.Item;

class ShippingRecover extends Component {
  constructor() {
    super();
    this.state = {
      visible: false,
    };
  }
  toggleVisible() {
    this.setState({ visible: !this.state.visible });
  }
  submit(shippingOrderId,status) {
    const { form, handleSubmit, page } = this.props;
    form.validateFields((err, values) => {
      if (err) return;
      this.toggleVisible();
      this.props.dispatch({
        type: 'order/updatePackageStatusById',
        payload: { ...values,shippingOrderId,status },
        cb() { handleSubmit(null, page); },
      });
    });
  }
  render() {
    const { record, form } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Popover
        content={<Form>
          <FormItem
            label="追回原因"
            labelCol={{ span: 8 }}
            wrapperCol={{ span: 16 }}
          >
            {getFieldDecorator('backReason', {
            	initialValue: "",
              rules: [{ required: true, message: '请输入' }],
            })(
              <Input placeholder="请输入" />,
            )}
          </FormItem>
          <Button size="small" type="primary" onClick={this.submit.bind(this,record.id,-1)}>保存</Button>
        </Form>}
        title="追回包裹"
        trigger="click"
        visible={this.state.visible}
        onVisibleChange={this.toggleVisible.bind(this)}
      >
        <a href="javascript:void(0)" style={{ marginRight: 10 }}><font color="purple">追回</font></a>
      </Popover>
    );
  }
}

export default Form.create()(ShippingRecover);
